<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>CSS 按钮组</title>
    <style>
        .btn-group button {
            /* Green background */
            background-color: #4CAF50;
            /* Green border */
            border: 1px solid green;
            /* White text */
            color: white;
            /* Some padding */
            padding: 10px 24px;
            /* Pointer/hand icon */
            cursor: pointer;
            /* Float the buttons side by side */
            float: left;
        }

        /* Clear floats (clearfix hack) */
        .btn-group:after {
            content: "";
            clear: both;
            display: table;
        }

        .btn-group button:not(:last-child) {
            /* Prevent double borders */
            border-right: none;
        }

        /* Add a background color on hover */
        .btn-group button:hover {
            background-color: #3e8e41;
        }
    </style>
</head>

<body>
    <h1>按钮组</h1>

    <p>两个按钮组:</p>
    <div class="btn-group" style="width:100%">
        <button style="width:50%">Apple</button>
        <button style="width:50%">Sony</button>
    </div>

    <p>三个按钮组:</p>
    <div class="btn-group" style="width:100%">
        <button style="width:33.3%">Apple</button>
        <button style="width:33.3%">Samsung</button>
        <button style="width:33.3%">Sony</button>
    </div>

    <p>四个按钮组:</p>
    <div class="btn-group" style="width:100%">
        <button style="width:25%">Apple</button>
        <button style="width:25%">Samsung</button>
        <button style="width:25%">Sony</button>
        <button style="width:25%">HTC</button>
    </div>
</body>

</html>